<template>
	<view>
    <view class="serch-box">
      <my-serch/>
    </view>
    <!-- 轮播图 -->
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" autoplay>
      <swiper-item v-for="item in swiperList" :key="item.goods_id">
        <navigator class="swiper-item" :url="'../../subpkg/goods_detail/goods_detail?goods_id='+ item.goods_id">
          <img :src="item.image_src" alt="">
        </navigator>
      </swiper-item>
    </swiper>
    <!-- nav -->
    <view class="nav-view">
      <view class="nav-view-item" v-for="(i, m) in navList" :key="m" @click="tabClick(i)">
        <img :src="i.image_src" alt="">
      </view>
    </view>
    <!-- 楼层 -->
    <view class="floor">
      <view class="floor-list" v-for="(i,m) in floorList" :key="m">
        <view class="floor-title">
          <img :src="i.floor_title.image_src" alt="">
        </view>
        <view class="floor-main">
           <view class="left">
             <image :src="i.product_list[0].image_src" mode="" @click="pushClick(i.product_list[0])"></image>
           </view>
           <view class="right">
             <img :src="item.image_src" alt="" v-for="(item,index) in i.product_list" :key="index" v-if="index !== 0"@click="pushClick(item)">
           </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import tabBarSet from '@/mixins/tabBarSet.js'
	export default {
    mixins:[tabBarSet], // 执行mixin里面的代码，设置购物车总数
		data() {
			return {
        swiperList: [],
        navList: [],
        floorList: []
			}
		},
    onLoad(){
      this.getSwiperList()
      this.getNavList()
      this.getFloorList()
    },
    methods:{
      async getSwiperList() {
        const { data: res } = await uni.$http.get('/api/public/v1/home/swiperdata')
        if (res.meta.status !== 200) { // 失败情况
                return uni.$showMsg()
              }
        this.swiperList = res.message
      },
      async getNavList() { // 获取导航栏信息
        const { data: res } = await uni.$http.get('/api/public/v1/home/catitems')
        if (res.meta.status !== 200) return uni.$showMsg()
        this.navList = res.message              
      },
      tabClick (i) { // 跳转到分类页面
        if (i.name === '分类') {
          uni.switchTab({
            url:'/pages/cate/cate'
          })
        }
      },
      async getFloorList() { // 获取楼层信息
            const { data: res } = await uni.$http.get('/api/public/v1/home/floordata')
            if (res.meta.status !== 200) return uni.$showMsg()
            this.floorList = res.message
            this.floorList.forEach(i => {
              // i.product_list.navigator_url = '/subpkg/goods_list/goods_list?'+ i.product_list.navigator_url.split('?')[1]
              // console.log(i.product_list)
              i.product_list.forEach(m =>{
                m.navigator_url = '/subpkg/goods_list/goods_list?' + m.navigator_url.split('?')[1]
              })
            })
          },
          pushClick (data) {
             uni.navigateTo({
               url: data.navigator_url
             })
          }
        }
    }
</script>

<style lang="scss">
.serch-box {
  // position:fixed;
  position: sticky; // 粘性布局，需要在外边包裹一个view容器
  top:0;
  left: 0;
  width: 100%;
  z-index: 1;
}
swiper {
  // margin-top: 50px;
 height: 330rpx;
  .swiper-item,
  image {
    width: 100%;
    height: 100%;
  }
}
.nav-view {
  display: flex;
  justify-content: space-around;
  margin: 15rpx 0;
  .nav-view-item, .nav-view-item img {
    width: 128rpx;
    height: 140rpx;
  }
}
.floor-title, .floor-title img {
    height: 60rpx;
    width: 100%;
    display: flex;
}
.floor-main {
  display: flex;
  padding-left: 10rpx;
  .left image  {
    width: 300rpx;
    // height: rpx;
  }
   .right {
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
     image {
       width: 210rpx;
       height: 210rpx;
     }
   }
}
</style>
